<template>
  <div class="map">
    <Map ref="hcMapRef" />
    <BtnList :list="list" @liHandle="liHandle" />
    <div class="msg animate__animated animate__backInDown" v-if="msg">
      {{ msg }}
    </div>
  </div>
</template>

<script setup>
import Map from '@/components/Map/index.vue'

import useMap from '@/components/Map/useMap'

import { onMounted, reactive, ref } from 'vue'
import BtnList from '@/components/BtnList/index.vue'
import Icon from '@/assets/img/location.png'
const hcMapRef = ref(null)

const {
  drawReseau,
  getBoundary,
  clearOverlay,
  drawDiyGraph,
  drawIcon,
  drawLabel,
  drawCircle,
  drawPolyline,
  drawPierced,
  drawHeatMap
} = useMap('mapContainer')

const list = reactive([
  {
    name: '反方向遮罩',
    type: 'deseauForm',
    active: false,
    fn: ffxzcFn,
    clearFormId: false
  },
  {
    name: '镂空遮罩',
    type: 'drawPierced',
    active: false,
    fn: lkFn,
    clearFormId: false
  },
  {
    name: '图标',
    type: 'drawIcon',
    active: false,
    fn: tbFn,
    onClick: bgHandle,
    clearFormId: false
  },
  {
    name: '文字',
    type: 'drawLabel',
    active: false,
    fn: wzFn,
    onClick: bgHandle,
    clearFormId: false
  },
  {
    name: '多边形1',
    type: 'diyGraph',
    active: false,
    fn: zdytxFn,
    onClick: bgHandle,
    clearFormId: true
  },
  {
    name: '多边形2',
    type: 'diyGraph',
    active: false,
    fn: zdytxFn2,
    onClick: bgHandle,
    clearFormId: true
  },
  {
    name: '圆形',
    type: 'drawCircle',
    active: false,
    fn: yxFn,
    onClick: bgHandle,
    clearFormId: false
  },
  {
    name: '折线',
    type: 'drawPolyline',
    active: false,
    fn: zxFn,
    onClick: bgHandle,
    clearFormId: false
  },
  {
    name: '热力图',
    type: 'drawHeatmap',
    active: false,
    fn: rltFn,
    onClick: bgHandle,
    clearFormId: false
  }
])
async function ffxzcFn(_item) {
  const boundaryList = [await getBoundary('佛山市', 0), await getBoundary('东莞市', 0)]
  drawReseau({
    id: _item.name,
    ponits: boundaryList
  })
}
async function lkFn(_item) {
  const boundaryList = [await getBoundary('广东省', 221), [await getBoundary('佛山市', 0)]]
  drawPierced({
    id: _item.name,
    ponits: boundaryList
  })
}
async function zdytxFn(_item) {
  const points = await getBoundary('顺德', 0)
  drawDiyGraph({
    id: _item.name,
    ponits: points,
    fillColor: 'aquamarine',
    fillOpacity: 0.5,
    onClick: _item.onClick
  })
}
async function zdytxFn2(_item) {
  const points = await getBoundary('三水区', 0)
  drawDiyGraph({
    id: _item.name,
    ponits: points,
    fillColor: 'aquamarine',
    fillOpacity: 0.5,
    onClick: _item.onClick
  })
}
async function tbFn(_item) {
  const arr = [
    { adress: '广州市', point: [113.27143, 23.13534] },
    { adress: '花都区 ', point: [113.22658, 23.41116] },
    { adress: '番禺', point: [113.39047, 22.94383] },
    { adress: '三水区', point: [112.90347, 23.16192] }
  ]
  arr.forEach((item) => {
    drawIcon({
      id: item.adress,
      point: item.point,
      onClick: _item.onClick,
      icon: Icon,
      iconSize: ['40px', '40px']
    })
  })
}
async function wzFn(_item) {
  const arr = [
    { adress: '广州市', point: [113.27143, 23.13534] },
    { adress: '花都区 ', point: [113.22658, 23.41116] },
    { adress: '番禺', point: [113.39047, 22.94383] },
    { adress: '三水区', point: [112.90347, 23.16192] }
  ]
  arr.forEach((item) => {
    drawLabel({
      id: item.adress,
      point: item.point,
      label: item.adress,
      onClick: _item.onClick
    })
  })
}
async function yxFn(_item) {
  const arr = [
    { adress: '广州市', point: [113.27143, 23.13534] },
    { adress: '花都区 ', point: [113.22658, 23.41116] },
    { adress: '番禺', point: [113.39047, 22.94383] },
    { adress: '三水区', point: [112.90347, 23.16192] }
  ]
  arr.forEach((item) => {
    drawCircle({
      id: item.adress,
      point: item.point,
      onClick: _item.onClick
    })
  })
}
async function zxFn(_item) {
  const arr = [
    { adress: '广州市', point: [113.27143, 23.13534] },
    { adress: '花都区 ', point: [113.22658, 23.41116] },
    { adress: '番禺', point: [113.39047, 22.94383] },
    { adress: '三水区', point: [112.90347, 23.16192] }
  ]

  drawPolyline({
    id: _item.name,
    points: arr.map((item) => item.point),
    strokeColor: 'pink',
    strokeWeight: 3,
    onClick: _item.onClick
  })
}

// 热力图
function rltFn(_item) {
  drawHeatMap()
}

// 绘制内容点击
const msg = ref('')
const timer = ref(null)
function bgHandle(e) {
  console.log(e)
  msg.value = `你点击了${e.mark.type}-${e.mark.id}的内容`
  if (timer.value !== null) {
    timer.value = null
  }
  timer.value = setTimeout(() => {
    msg.value = ''
    clearTimeout(timer.value)
    timer.value = null
  }, 2000)
}

// 菜单点击
async function liHandle(_idx) {
  const cell = list[_idx]
  cell.active = !cell.active
  if (cell.active) {
    cell.fn(cell)
  } else {
    clearOverlay(cell.type, cell.clearFormId ? [cell.name] : [])
  }
}
</script>

<style lang="less" scoped>
.map {
  position: absolute;
  width: 100%;
  height: 100%;
}
.msg {
  position: absolute;
  left: 45%;
  top: 20px;
  z-index: 3;
  line-height: 40px;
  background-color: #000000a8;
  color: #fff;
  padding: 0 40px;
  border-radius: 10px;
}
</style>
